{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main" v-cloak>
        <div class="ht-form">
            <el-form :model="editData" label-width="110px" ref="myform">
                <el-tabs v-model="activeTab" @tab-click="setSession">
                    <el-tab-pane :label="item.title" v-for="item in configList" :name="item.key" :key="item.id">
                        <el-form-item :label="son.title" v-if="son.status == 1" v-for="son in item.children" :key="son.id">
                            <el-row :gutter="10">
                                <el-col :span="15">
                                    <el-input v-if="son.type == 'input'" type="text" size="small"
                                              :placeholder="[son.tips?son.tips:son.title]"
                                              v-model="itemData[son.key]"></el-input>
                                    <ht-editor :id="son.key" v-if="son.type == 'editor'" v-model="itemData[son.key]"></ht-editor>
                                    <el-input v-if="son.type == 'textarea'" type="textarea" size="small"
                                              :placeholder="[son.tips?son.tips:son.title]"
                                              v-model="itemData[son.key]"></el-input>
                                    <el-select v-if="son.type == 'select'" v-model="itemData[son.key]"size="small">
                                        <el-option :value="item" :key="item.id" :label="item" v-for="item in son.option"></el-option>
                                    </el-select>
                                    <el-input v-if="son.type == 'image'" type="text" size="small"
                                              :placeholder="[son.tips?son.tips:son.title]" style="width: 70%"
                                              v-model="itemData[son.key]"></el-input>
                                    <el-button size="small" v-if="son.type == 'image'" type="primary" @click="showDialog(1,'itemData',son.key)">选择图片</el-button>
                                </el-col>
                                <el-col :span="8" style="color: #606266">
                                    {{son.tips?son.tips:son.title}}
                                </el-col>
                            </el-row>
                            <img :src="itemData[son.key]" @click="showImg(itemData[son.key])" v-if="itemData[son.key] && son.type=='image'"
                                 style="max-height: 100px;margin: 5px 0 0 5px;cursor: pointer">
                        </el-form-item>
                        <el-form-item label-width="80px">
                            <el-button size="small" type="primary" @click="onItemSubmit">提交</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane name="last" label="列表" v-if="last_show">
                        <div class="ht-tool">
                            <div class="ht-tool-left">
                                <el-button type="success" size="mini" icon="el-icon-plus" @click="doAdd">添加</el-button>
                            </div>
                            <div class="ht-tool-right">
                            </div>
                        </div>
                        <el-table :data="tableData" border header-row-class-name="ht-table-header" row-key="title"
                                  ref="dataTable" @selection-change="handleSelectChange" :tree-props="{children:'children'}"
                        >
                            <el-table-column
                                    align="center"
                                    type="selection"
                                    width="39">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="id"
                                    label="ID"
                                    type=""
                                    width="80px">
                            </el-table-column>
                            <el-table-column align="center"
                                             prop="title"
                                             label="标题">
                            </el-table-column>
                            <el-table-column align="center"
                                             prop="key"
                                             label="键">
                            </el-table-column>
                            <el-table-column align="center"
                                             prop="value"
                                             label="值">
                                <template slot-scope="scope" >
                                    <img :src="scope.row.value" @click="showImg(scope.row.value)" v-if="scope.row.type =='image' && scope.row.value"
                                         style="max-height: 100px;cursor: pointer">
                                    <span v-if="scope.row.type !=='image' && scope.row.type !== 'editor'">{{scope.row.value}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="option"
                                    label="选项">
                                <template slot-scope="scope" v-if="scope.row.option.length">
                                    {{scope.row.option ? scope.row.option.join(",") : ''}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="type"
                                    width="180px"
                                    label="类型">
                                <template slot-scope="scope" >
                                    <el-tag size="mini" v-if="scope.row.type == 'parent'">顶部标签</el-tag>
                                    <el-tag size="mini" v-if="scope.row.type == 'select'">下拉框</el-tag>
                                    <el-tag size="mini" v-if="scope.row.type == 'input'">输入框</el-tag>
                                    <el-tag size="mini" v-if="scope.row.type == 'image'">图片</el-tag>
                                    <el-tag size="mini" v-if="scope.row.type == 'image'">文本域</el-tag>
                                    <el-tag size="mini" v-if="scope.row.type == 'editor'">富文本</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="status"
                                    width="180px"
                                    label="显示">
                                <template slot-scope="scope" >
                                    <el-switch
                                            v-model="scope.row.status"
                                            active-color="#13ce66"
                                            inactive-color="#eeeeee"
                                            @change="changeStatus($event,scope.row.id)"
                                            :active-value="1"
                                            :inactive-value="2">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    width="140">
                                <template slot-scope="scope">
                                    <el-button @click="edit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
                                    <el-button @click="del(scope.row)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="ht-main-page">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="page"
                                    :page-sizes="[1,10, 200, 300, 400]"
                                    :page-size="limit"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <el-drawer
                    :visible.sync="is_edit"
                    size="90%"
                    :with-header="false"
                    custom-class="ht-drawer-bg"
            >
                <div class="ht-drawer-main">
                    <el-page-header @back="goBack" title="Esc返回" :content="content"></el-page-header>
                    <div class="ht-form">
                        <el-form :model="editData" label-width="120px" size="small">
                            <el-form-item label="上级">
                                <el-select v-model="editData.pid">
                                    <el-option :value="0" label="--顶级--"></el-option>
                                    <el-option :value="item.id" :label="item.title" v-for="item in configList" :key="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="标题">
                                <el-input type="text" placeholder="标题" v-model="editData.title"></el-input>
                            </el-form-item>
                            <el-form-item label="键值">
                                <el-input type="text" placeholder="字母开头，英文和数字组成" v-model="editData.key"></el-input>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input type="text" placeholder="排序" v-model="editData.sort"></el-input>
                            </el-form-item>
                            <div v-if="editData.pid != 0">
                            <el-form-item label="类型">
                                <el-select v-model="editData.type" >
                                    <el-option value="select" label="下拉框"></el-option>
                                    <el-option value="input" label="输入框"></el-option>
                                    <el-option value="textarea" label="文件域"></el-option>
                                    <el-option value="image" label="图片"></el-option>
                                    <el-option value="editor" label="富文本"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选项" v-if="editData.type == 'select'">
                                <el-row style="margin: 0 0 5px 0  !important;" :gutter="10" v-for="(it,index) in editData.option" :key="index">
                                    <el-col :span="4">
                                        <el-input type="text" v-model="editData.option[index]" placeholder="选项"></el-input>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button type="success" size="mini" v-if="index == 0" @click="itemAdd">添加</el-button>
                                        <el-button type="danger" v-if="index != 0" size="mini" @click="itemDel(index)">删除</el-button>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="默认值">
                                <el-input type="text" placeholder="默认值" v-model="editData.value"></el-input>
                            </el-form-item>
                            <el-form-item label="提示">
                                <el-input type="text" placeholder="提示" v-model="editData.tips"></el-input>
                            </el-form-item>
                            </div>
                            <el-form-item>
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-drawer>
        </div>
    </div>
</div>
{include file="public/common"}
{include file="public/editor"}
<script>
    let vs
   var vm = new Vue({
        el:"#app",
        data:function () {
            return {
                arctypeList:[],
                activeTab:'',
                tableData: [],
                is_edit:false,
                editData:{},
                content:'编辑',
                total:0,
                page:1,
                limit:10,
                configList:[],
                indexShow:false,
                registerShow:false,
                itemData:{},
                last_show:false
            }
        },
        created:function() {
            vs = this
            vs.getConfig()
            vs.getItem()
            vs.getLastShow()
            vs.getTable()
        },
        methods: {
            getLastShow() {
                $.post('{:url("Config/getLastShow")}',function (res){
                    if (res.code === 1) {
                        vs.last_show = res.data.last_show
                    }
                })
            },
            setSession(e) {
                Helper.set('config_name',e.name)
            },
            showDialog(count,data,key) {
                vs.imageOpen(data,key,count)
            },
            getItem() {
                console.log(vs.itemData);
                $.post('{:url("Config/getItem")}',vs.itemData,function (res){
                    if (res.code === 1) {
                        vs.itemData = res.data
                    } else {
                        vs.showErrorMsg(res.msg)
                    }
                })
            },
            onItemSubmit() {
                console.log(vs.itemData);
                $.post('{:url("Config/itemAdd")}',vs.itemData,function (res){
                    if (res.code === 1) {
                        vs.showSuccessMsgCall(function (){
                            location.reload()
                        })
                    } else {
                        vs.showErrorMsg(res.msg)
                    }
                })
            },
            itemAdd() {
                vs.editData.option.push("")
            },
            itemDel(index) {
                vs.editData.option.splice(index,1)
            },
            changeStatus(e,id) {
                Api.request("{:url('Config/setStatus')}",{id:id,status:e})
            },
            onSubmit() {
                $.post('{:url("Config/add")}',vs.editData,function (res){
                    if (res.code === 1) {
                        vs.showSuccessMsgCall(function (){
                            location.reload()
                        })
                    } else {
                        vs.showErrorMsg(res.msg)
                    }
                })
            },
            getConfig:function() {
                $.post('{:url("Config/all")}',{search_key:{pid:0,status:1}}).then((res)=>{
                    vs.configList = res.data
                })
            },
            getTable:function() {
                $.post('{:url("Config/all")}',{search_key:{pid:0}}).then((res)=>{
                    vs.tableData = res.data
                    vs.activeTab = Helper.get('config_name')
                    if (!vs.activeTab) {
                        vs.activeTab = vs.configList[0].key
                        Helper.set('config_name',vs.activeTab)
                    }
                })
            },
            doAdd:function(){
                this.is_edit = true
                this.content = '添加'
                this.editData = {
                    pid:0,
                    option:[""]
                }
            },
            edit:function(data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
                console.log(data)
            },
            goBack:function(){
                this.is_edit = false
            },
            del:function(data) {
                var that = this
                that.$confirm('确定删除么?','提示',{
                    type:'warning',
                    lockScroll:false
                }).then(()=>{
                    axios.post('{:url("Config/del")}',{id:data.id}).then((res)=>{
                        let result = res.data;
                        if (result.code == 1) {
                            that.showSuccessMsgCall(function (){
                                vs.getConfig()
                                vs.getTable()
                            })
                        } else {
                            that.showErrorMsg(result.msg)
                        }
                    })
                })
            },
            handleSizeChange:function(e) {
                this.limit = e
            },
            handleCurrentChange:function(e) {
                this.page = e
            }
        },
        watch:{
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
